import React, { useState, useEffect, useRef } from 'react';
import { CloseSquareOutlined, LoadingOutlined } from '@ant-design/icons';
import useSlice from '@/components/widgets/Slice/useSlice';
import styles from './index.less';
import { ConnectProps } from '@/models/connect';

import cls from 'classnames';
import { Spin } from 'antd';

interface ISlice3DPanel extends ConnectProps {
  onClose: () => void;
}

const Slice3DPanel: React.FC<ISlice3DPanel> = ({ onClose }) => {
  const domRef = useRef();
  const [isLoading] = useSlice(domRef);

  return (
    <div className={cls('base-panel', styles.slice3D)}>
      <div className="base-panel-title">
        剖切
        <span className="base-panel-title-btn">
          <CloseSquareOutlined onClick={onClose} />
        </span>
      </div>

      <div
        className="base-panel-body"
        // @ts-ignore
        ref={domRef}
        style={{ padding: '16px 24px', height: 'auto' }}
      >
        {isLoading && (
          <div style={{ textAlign: 'center', paddingTop: 30 }}>
            <Spin
              size="large"
              spinning={isLoading}
              indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default Slice3DPanel;
